<template>
  <div class="list-wrapper">
    <h4 class="list-title">用户修改</h4>
    <form ref="user_update" action="" autocomplete="off" @submit.prevent="handleSubmit">
      <div class="form-item">
        <label for="user_img">用户头像</label>
        <div class="form-input avatar">
          <a href="javascript:;" class="avatar-img">
            <img :src="fileImg" width="90" height="90">
          </a>
          <input type="file" name="head_img" accept="image/*" class="hidden-input" id="user_img" :file-list="user_img" @change="handFile">
        </div>
      </div>
      <div class="form-item">
        <label for="user_account">用户名</label>
        <div class="form-input">
          <input type="text" name="user_account" placeholder="请输入用户名" id="user_account" v-model="user_account">
        </div>
      </div>
      <div class="form-item">
        <label for="password">密码</label>
        <div class="form-input">
          <input type="password" name="password" placeholder="请输入密码" id="password" pattern="[0-9A-Za-z]{6,16}" title="密码为6-16位数字或字母" v-model="password">
        </div>
      </div>
      <div class="form-item">
        <label for="nickname">用户昵称</label>
        <div class="form-input">
          <input type="text" name="nickname" placeholder="请输入昵称" id="nickname" v-model="nickname">
        </div>
      </div>
      <div class="form-item">
        <label>性别</label>
        <div class="form-input">
          <input type="radio" name="sex" value="男" checked v-model="sex">男
          <input type="radio" name="sex" value="女" v-model="sex">女
        </div>
      </div>
      <div class="form-item">
        <label for="mobile_number">手机号</label>
        <div class="form-input">
          <input type="tel" name="mobile_number" placeholder="请输入手机号" id="mobile_number" pattern="(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|0])\d{8}" title="输入的手机号码不正确" v-model="mobile_number">
        </div>
      </div>
      <div class="form-item">
        <label>是否删除</label>
        <div class="form-input">
          <select v-model="checkDel">
            <option value="0" selected="selected">否</option>
            <option value="1">是</option>
          </select>
        </div>
      </div>
      <input type="hidden" name="user_id" :value="editId">
      <input type="hidden" name="del" :value="checkDel">
      <input type="hidden" name="old_path" :value="user_img">
      <input type="hidden" name="token" :value="adminToken">
      <div class="form-item">
        <label></label>
        <div class="form-input">
          <input type="submit" value="确认修改">
        </div>
      </div>
    </form>
    <!--遮罩层-->
    <div id="popLayer" v-show="flag"></div>
    <!--弹出层-->
    <div id="popBox" v-show="flag">
      <div class="popBox-content">
        <p>确认修改用户信息？</p>
        <div class="pop-btn">
          <button @click="handleEditData">确认</button>
          <button @click="handleCancelBtn" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>
//ibf_question_sales_oid_fkey
//
<script>
//头像实时显示
var fileInput=document.getElementById('user_img');
export default {
  name: "UserEdit",
  created() {
    this.adminToken=this.getCookie('adminToken');
    this.$axios.get('/user/info',{
      params:{'user_id':this.editId,'token':this.adminToken}
    }).then(response=>{
      let res=response.data;
      if(res.state==200){
        this.userData=res.data;
        this.user_account=this.userData[0].user_account;
        this.password=this.userData[0].user_password;
        this.nickname=this.userData[0].nickname;
        this.sex=this.userData[0].sex;
        this.mobile_number=this.userData[0].mobile_number;
        this.user_img=this.userData[0].head_img;
        this.checkDel=this.userData[0].del;
        this.fileImg=this.userData[0].head_img;
      }
    }).catch(error=>{
      console.log(error);
    })
  },
  data(){
    return {
      userData:null,
      flag:false,
      user_img:'',
      user_account:'',
      password:'',
      nickname:'',
      mobile_number:'',
      fileImg:'',
      sex:'',
      checkDel:'',
      adminToken:'',
      editId:this.$route.query.id
    }
  },
  methods:{
    handleSubmit(){
      this.flag=true
    },
    handleCancelBtn(){
      this.flag=false
    },
    //修改用户
    handleEditData(){
      //请求列表数据
      this.$axios({
        url:'/user/doedit',data:new FormData(this.$refs.user_update),headers:{'content-type':'multipart/form-data'},method:'put'
      }).then(response=>{
        let res=response.data;
        if(res.state===200){
          this.$router.push('/admin/userlist')
        }
        else if(res.state===500){
          alert(res.msg);
          this.$router.push('/admin/login')
        }
        else{
          alert(res.msg);
        }
        this.flag=false;
      }).catch(error=>{
        console.log(error);
      })
    },
    handFile(e){
      let $target=e.target||e.srcElement;
      if(typeof $target.files[0] === 'undefined'){
        return;
      }
      let file=$target.files[0];
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload=data=>{
        this.fileImg=data.target.result;
      }
    }
  }
}
</script>

<style scoped>
@import "../../static/css/user_edit.css";
</style>
